<template>
  <div class="dashbordMain">
    <div class="top">
      <div class="bigLeft">
        <div class="bigLeft_chart" id="bigLeft_chart"></div>
      </div>
      <div class="smallRight">
        <div class="smallRight_item" ref="smallRight_item">
          <div class="smallRight_item_mask"></div>
          <div class="smallRight_item_title">Parking Space</div>
          <div class="smallRight_item_data">{{ statistics.spaceTotal }}</div>
          <div class="smallRight_item_time">{{ NowDate }}</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom_left">
        <div class="left_item">
          <div class="left_item_top">
            <div class="left_item_icon" style="background-color: #be2edd">
              <span class="iconfont icon-shandian"></span>
            </div>
          </div>
          <div class="left_item_title">天收入</div>
          <div class="left_item_data" ref="data_icon1">
            <span>{{ statistics.incomeTotal_today }}</span>
            <i
              :class="{
                'el-icon-top iconTop':
                  statistics.incomeList_prop_ty.slice(0, 1) === '+',
                'el-icon-bottom iconDown':
                  statistics.incomeList_prop_ty.slice(0, 1) === '-',
                'el-icon-minus':
                  statistics.incomeList_prop_ty.slice(0, 1) !== '-' &&
                  statistics.incomeList_prop_ty.slice(0, 1) !== '+',
              }"
            ></i>
          </div>
          <div class="left_item_Increase">
            <span>{{ statistics.incomeList_prop_ty }}%</span>
          </div>
        </div>
        <div class="left_item">
          <div class="left_item_top">
            <div class="left_item_icon" style="background-color: #341f97">
              <span class="iconfont icon-tubiaoshangshengqushi"></span>
            </div>
          </div>
          <div class="left_item_title">月收入</div>
          <div class="left_item_data" ref="data_icon2">
            <span>{{ statistics.incomeTotal_month }}</span>
            <i
              :class="{
                'el-icon-top iconTop':
                  statistics.incomeList_prop_ml.slice(0, 1) === '+',
                'el-icon-bottom iconDown':
                  statistics.incomeList_prop_ml.slice(0, 1) === '-',
                'el-icon-minus':
                  statistics.incomeList_prop_ml.slice(0, 1) !== '-' &&
                  statistics.incomeList_prop_ml.slice(0, 1) !== '+',
              }"
            ></i>
          </div>
          <div class="left_item_Increase">
            <span> {{ statistics.incomeList_prop_ml }}%</span>
          </div>
        </div>
        <div class="left_item">
          <div class="left_item_top">
            <div class="left_item_icon" style="background-color: #fa983a">
              <span class="iconfont icon-shijian-xianxing"></span>
            </div>
          </div>
          <div class="left_item_title">季收入</div>
          <div class="left_item_data" ref="data_icon3">
            <span>{{ statistics.incomeTotal_quarter }}</span>
            <i
              :class="{
                'el-icon-top iconTop':
                  statistics.incomeList_prop_ql.slice(0, 1) === '+',
                'el-icon-bottom iconDown':
                  statistics.incomeList_prop_ql.slice(0, 1) === '-',
                'el-icon-minus':
                  statistics.incomeList_prop_ql.slice(0, 1) !== '-' &&
                  statistics.incomeList_prop_ql.slice(0, 1) !== '+',
              }"
            ></i>
          </div>
          <div class="left_item_Increase">
            <span>{{ statistics.incomeList_prop_ql }}%</span>
          </div>
        </div>
      </div>
      <div class="bottom_right">
        <div class="right_item">
          <div class="right_item_left" id="right_item_1"></div>
          <div class="right_item_right">
            <div class="right_item_right_title">今日进场数</div>
            <div class="right_item_right_data">
              {{ statistics.distinguishIn_today }}
            </div>
          </div>
        </div>
        <div class="right_item">
          <div class="right_item_left" id="right_item_2"></div>
          <div class="right_item_right">
            <div class="right_item_right_title">今日出场数</div>
            <div class="right_item_right_data">
              {{ statistics.distinguishOut_today }}
            </div>
          </div>
        </div>
        <div class="right_item">
          <div class="right_item_left" id="right_item_3"></div>
          <div class="right_item_right">
            <div class="right_item_right_title">今日识别数</div>
            <div class="right_item_right_data">
              {{ statistics.distinguishAll_today }}
            </div>
          </div>
        </div>
        <div class="right_item">
          <div class="right_item_left" id="right_item_4"></div>
          <div class="right_item_right">
            <div class="right_item_right_title">今日访客数</div>
            <div class="right_item_right_data">
              {{ statistics.visitorCount_today }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sortWeeks } from "../utils/sortWeeks";
import { toThousand } from "../utils/toThousand";

const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/grid");
require("echarts/lib/chart/line");

require("echarts/lib/component/title");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/chart/pie");
export default {
  name: "DashbordMain",
  data() {
    return {
      NowDate: "",
      left_item_data: [
        {
          id: 1,
          data: "3.45k",
          scale: "+6.4",
        },
        {
          id: 2,
          data: "12.9k",
          scale: "-3.1",
        },
        {
          id: 3,
          data: "14.4k",
          scale: "+10.3",
        },
      ],
      bottom_right_data: [
        {
          id: 1,
          data: 56,
          yesData: 20,
        },
        {
          id: 2,
          data: 44,
          yesData: 31,
        },
        {
          id: 3,
          data: 120,
          yesData: 78,
        },
        {
          id: 4,
          data: 32,
          yesData: 64,
        },
      ],
      charts: {
        distinguish_in: null,
        distinguish_out: null,
      },
      statistics: {
        distinguishIn_today: "0",
        incomeTotal_quarter: "2",
        incomeList_prop_ty: "0",
        spaceTotal: "0",
        distinguishAll_today: "0",
        distinguishOut_scale: "0",
        visitorCount_scale: "-75",
        distinguishIn_scale: "0",
        incomeList_prop_ml: "0",
        incomeList_prop_ql: "0",
        incomeTotal_today: "0",
        distinguish_scale: "0",
        visitorCount_today: "2",
        distinguishOut_today: "0",
        incomeTotal_month: "0",
      },
    };
  },
  created() {
    this.getStatistics();
  },
  mounted() {
    this.getNowDate();
    this.switch_smallRight();
    this.switch_left_item();
  },
  methods: {
    //数据初始化
    getStatistics() {
      this.axios
        .get("/component/statistics")
        .then((res) => {
          if (res.data.code === "200") {
            const charts = res.data.data.charts;
            this.charts.distinguish_in = sortWeeks(charts.distinguish_in);
            this.charts.distinguish_out = sortWeeks(charts.distinguish_out);
            this.statistics.spaceTotal = res.data.data.statistics.spaceTotal;
            this.statistics.incomeTotal_today = toThousand(
              res.data.data.statistics.incomeTotal_today
            );
            this.statistics.incomeTotal_month = toThousand(
              res.data.data.statistics.incomeTotal_month
            );
            this.statistics.incomeTotal_quarter = toThousand(
              res.data.data.statistics.incomeTotal_quarter
            );
            this.statistics.incomeList_prop_ty =
              res.data.data.statistics.incomeList_prop_ty;
            this.statistics.incomeList_prop_ml =
              res.data.data.statistics.incomeList_prop_ml;
            this.statistics.incomeList_prop_ql =
              res.data.data.statistics.incomeList_prop_ql;

            this.statistics.distinguishOut_today =
              res.data.data.statistics.distinguishOut_today;
            this.statistics.distinguishIn_today =
              res.data.data.statistics.distinguishIn_today;
            this.statistics.distinguishAll_today =
              res.data.data.statistics.distinguishAll_today;
            this.statistics.visitorCount_today =
              res.data.data.statistics.visitorCount_today;

            this.statistics.distinguishIn_scale =
              res.data.data.statistics.distinguishIn_scale;
            this.statistics.distinguishOut_scale =
              res.data.data.statistics.distinguishOut_scale;
            this.statistics.distinguish_scale =
              res.data.data.statistics.distinguish_scale;
            this.statistics.visitorCount_scale =
              res.data.data.statistics.visitorCount_scale;

            this.bigLeft_chart();
            this.circle();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("获取统计数据失败");
        });
    },
    getNowDate() {
      let date = new Date();
      const year = date.getFullYear();
      const monuth = date.getMonth() + 1;
      const day = date.getDate();
      const mydate = `${year}/${monuth}/${day}`;
      this.NowDate = mydate;
    },
    bigLeft_chart() {
      const In = this.charts.distinguish_in;
      const Out = this.charts.distinguish_out;
      var chartDom = document.getElementById("bigLeft_chart");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "七天车辆出入统计",
          textStyle: {
            color: "#5c6068",
            fontStyle: "normal",
            fontWeight: "normal",
          },
        },
        grid: {
          left: "5%",
          top: "30%",
          right: "10%",
          bottom: "0%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["车辆进场数", "车辆出场数"],
        },
        xAxis: {
          name: "天数",
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          name: "数量/辆",

          type: "value",
        },
        series: [
          {
            name: "车辆进场数",
            data: In,
            type: "line",
            smooth: true,
          },
          {
            name: "车辆出场数",
            data: Out,
            type: "line",
            smooth: true,
          },
        ],
      };

      option && myChart.setOption(option);

      window.onresize = function () {
        myChart.resize();
      };
    },
    switch_smallRight() {
      const smallRight_item = this.$refs.smallRight_item;
      const nowTime = new Date()
        .toLocaleTimeString("chinese", {
          hour12: false,
        })
        .slice(0, 2);
      if (6 < nowTime && nowTime < 18) {
        smallRight_item.classList.add("day");
      } else {
        smallRight_item.classList.add("night");
      }
    },
    switch_left_item() {
      const data_icon1 = this.$refs.data_icon1;
      const data_icon2 = this.$refs.data_icon2;
      const data_icon3 = this.$refs.data_icon3;
      this.left_item_data[0].scale.slice(0, 1) === "+"
        ? data_icon1.classList.add("rise")
        : data_icon1.classList.add("decline");
      this.left_item_data[1].scale.slice(0, 1) === "+"
        ? data_icon2.classList.add("rise")
        : data_icon2.classList.add("decline");
      this.left_item_data[2].scale.slice(0, 1) === "+"
        ? data_icon3.classList.add("rise")
        : data_icon3.classList.add("decline");
    },
    circle() {
      var myChart1 = echarts.init(document.getElementById("right_item_1"));
      var myChart2 = echarts.init(document.getElementById("right_item_2"));
      var myChart3 = echarts.init(document.getElementById("right_item_3"));
      var myChart4 = echarts.init(document.getElementById("right_item_4"));
      var e1 = parseInt(this.statistics.distinguishIn_scale);
      var e2 = parseInt(this.statistics.distinguishOut_scale);
      var e3 = parseInt(this.statistics.distinguish_scale);
      var e4 = parseInt(this.statistics.visitorCount_scale);
      var option = {
        title: {
          show: true,
          text: e1 + "%",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: "16",
            color: "#303133",
            fontWeight: "400",
            fontFamily: "DINPro, DINPro-Regular",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{d}%",
          show: false,
        },
        legend: {
          orient: "vertical",
          x: "left",
          show: false,
        },
        series: {
          name: "",
          type: "pie",
          radius: ["65%", "85%"],
          avoidLabelOverlap: true,
          hoverAnimation: true,
          label: {
            normal: {
              show: false,
              position: "center",
            },
            emphasis: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: e1,
              name: "",
              itemStyle: {
                color: "#ff9f43",
              },
            },
            {
              value: 100 - e1,
              name: "",
              itemStyle: {
                color: "#f4f5f7",
              },
            },
          ],
        },
      };
      var option1 = {
        title: {
          show: true,
          text: e2 + "%",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: "16",
            color: "#303133",
            fontWeight: "400",
            fontFamily: "DINPro, DINPro-Regular",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{d}%",
          show: false,
        },
        legend: {
          orient: "vertical",
          x: "left",
          show: false,
        },
        series: {
          name: "",
          type: "pie",
          radius: ["65%", "85%"],
          avoidLabelOverlap: true,
          hoverAnimation: true,
          label: {
            normal: {
              show: false,
              position: "center",
            },
            emphasis: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: e2,
              name: "",
              itemStyle: {
                color: "#341f97",
              },
            },
            {
              value: 100 - e2,
              name: "",
              itemStyle: {
                color: "#f4f5f7",
              },
            },
          ],
        },
      };
      var option2 = {
        title: {
          show: true,
          text: e3 + "%",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: "16",
            color: "#303133",
            fontWeight: "400",
            fontFamily: "DINPro, DINPro-Regular",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{d}%",
          show: false,
        },
        legend: {
          orient: "vertical",
          x: "left",
          show: false,
        },
        series: {
          name: "",
          type: "pie",
          radius: ["65%", "85%"],
          avoidLabelOverlap: true,
          hoverAnimation: true,
          label: {
            normal: {
              show: false,
              position: "center",
            },
            emphasis: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: e3,
              name: "",
              itemStyle: {
                color: "#54a0ff",
              },
            },
            {
              value: 100 - e3,
              name: "",
              itemStyle: {
                color: "#f4f5f7",
              },
            },
          ],
        },
      };
      var option3 = {
        title: {
          show: true,
          text: e4 + "%",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: "16",
            color: "#303133",
            fontWeight: "400",
            fontFamily: "DINPro, DINPro-Regular",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{d}%",
          show: false,
        },
        legend: {
          orient: "vertical",
          x: "left",
          show: false,
        },
        series: {
          name: "",
          type: "pie",
          radius: ["65%", "85%"],
          avoidLabelOverlap: true,
          hoverAnimation: true,
          label: {
            normal: {
              show: false,
              position: "center",
            },
            emphasis: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: e4,
              name: "",
              itemStyle: {
                color: "#1dd1a1",
              },
            },
            {
              value: 100 - e4,
              name: "",
              itemStyle: {
                color: "#f4f5f7",
              },
            },
          ],
        },
      };
      myChart1.setOption(option);
      myChart2.setOption(option1);
      myChart3.setOption(option2);
      myChart4.setOption(option3);

      window.onresize = function () {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
        myChart4.resize();
      };
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.dashbordMain {
  width: 100%;
  height: 100%;
}
.top {
  margin-top: 5px;
  width: 100%;
  height: 46vh;
}
.bottom {
  width: 100%;
  height: 40vh;
}
.bigLeft {
  float: left;
  width: 70%;
  height: 46vh;
  padding: 5px;
  background-color: #ffffff;
  border-radius: 2vh;
}

.bigLeft_chart {
  margin: 5px auto;
  width: 100%;
  height: 44vh;
  text-align: center;
  z-index: 999;
}
.smallRight {
  float: right;
  padding: 0px 10px;
  width: 30%;
  height: 46vh;
}
.smallRight_item {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  box-shadow: 0px 3px 8px #888888;
}
.smallRight_item:hover {
  box-shadow: 0px 0px 12px #a3bffe;
}
.smallRight_item.day {
  background-image: url("../assets/image/day.png");
  background-size: 100% 100%;
}
.smallRight_item.night {
  background-image: url("../assets/image/night.png");
  background-size: 100% 100%;
}
.smallRight_item_mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 8%;
}
.smallRight_item_title {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 80%;
  height: 10%;
  line-height: 5vh;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
}
.smallRight_item_data {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  height: 10%;
  line-height: 5vh;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 600;
}
.smallRight_item_time {
  position: absolute;
  bottom: 25%;
  right: -20%;
  width: 80%;
  height: 15%;
  transform: rotate(-90deg);
  line-height: 6vh;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
}
.bottom_left {
  display: flex;
  float: left;
  width: 45%;
  height: 40vh;
  align-items: center;
}
.left_item {
  flex: auto;
  margin: 2%;
  width: 37%;
  height: 90%;
  background-color: #ffffff;
  text-align: left;
  border-radius: 2vh;
  box-shadow: 0px 3px 8px #d3cfcf;
}
.left_item:hover {
  box-shadow: 0px 0px 12px #a3bffe;
}
.left_item_top {
  width: 80%;
  height: 25%;
  padding: 5px;
}
.left_item_title {
  margin-top: 5px;
  width: 100%;
  height: 20%;
  padding: 5px;
  color: #606266;
  line-height: 6.5vh;
  font-family: "Microsoft YaHei";
}
.left_item_data {
  margin-top: 5px;
  width: 100%;
  height: 15%;
  padding: 5px;
  color: #000000;
  font-size: 1.4rem;
  font-family: "Microsoft YaHei";
}
.left_item_data i {
  font-size: 1rem;
}

.left_item_Increase {
  margin-top: 5px;
  width: 100%;
  height: 20%;
  padding: 5px;
  color: #606266;
  font-size: 0.8rem;
  font-family: "Microsoft YaHei";
}
.left_item_icon {
  width: 80%;
  height: 100%;
  border-radius: 1vw;
}
.left_item_icon span {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 2rem;
  line-height: 8vh;
  text-align: center;
}
.bottom_right {
  display: flex;
  float: right;
  width: 55%;
  height: 40vh;
  padding: 1% 0;
  flex-wrap: wrap;
}
.right_item {
  flex: auto;
  margin: 3%;
  width: 44%;
  height: 38%;
  background-color: #ffffff;
  border-radius: 2vw;
  box-shadow: 0px 3px 8px #d3cfcf;
}
.right_item:hover {
  box-shadow: 0px 0px 12px #a3bffe;
}
.right_item_left {
  float: left;
  width: 45%;
  height: 100%;
}
.right_item_right {
  float: right;
  width: 55%;
  height: 100%;
}
.right_item_right_title {
  width: 100%;
  height: 50%;
  line-height: 10vh;
}
.right_item_right_data {
  width: 100%;
  height: 50%;
  font-size: 1.6rem;
}
.iconTop {
  color: #67c23a;
}
.iconDown {
  color: #f56c6c;
}
</style>